<template>
    <div>
        <div class="tab" style="display: flex;justify-content: space-around;margin-top: 30px">
            <div class="tab" style="display: flex;align-items: center">
            <div>推荐标题</div>
            <div class="tabSearch" style="display: flex;">
                <el-input style="margin: 0 10px ;" v-model="titleData" placeholder="请输入推荐标题"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button>
            </div>
        </div>
            <div style="display: flex;align-items: center">
                <div>选择专家</div>
                <el-select style="margin: 0 10px ;" v-model="inputName" placeholder="选择专家" @change="handleChange">
                <el-option v-for="item in expertDataList" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            </div>
            <div style="display: flex;align-items: center">
                <div>选择分类</div>
                <el-select style="margin: 0 10px ;" v-model="fbData" placeholder="选择分类" @change="handleChangeType">
                <el-option v-for="item in fbAll" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            </div>
            <div style="display: flex;align-items: center">
                <div>是否不中退</div>
                <el-select style="margin: 0 10px ;" v-model="ynData" placeholder="选择分类" @change="handleChangeYesOrNo">
                <el-option v-for="item in yOrN" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            </div>
        </div>
        <div class="addBtn">
            <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>
            <el-dialog title="添加" :visible.sync="dialogTableVisible" :before-close="closeForm" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-dialog width="50%" title="赛事选择" :visible.sync="innerVisible" append-to-body :before-close="closeFormData">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="主队搜索">
                            <el-input style="width: 200px;" v-model="inputData" placeholder="输入队伍名称搜索"
                                @input="getInput"></el-input>
                        </el-form-item>
                        <el-form-item label="预测分类">
                            <el-radio-group v-model="ruleForm.yuce" @change="changeYuce">
                                <el-radio v-for="(item, index) in yuce" :key="index" :label="item.id">{{ item.text
                                    }}</el-radio>
                            </el-radio-group>
                        </el-form-item>

                    </el-form>
                    <div style="display: flex;flex-wrap: wrap">
                        <div v-for="(item, index) in dataList" :key="index" >
                            <el-radio-group v-model="radio1" @change="changeMatch">
                                <el-radio-button :label="item" style="margin-left: 10px;margin-bottom: 10px">
                                    <div style="margin: 10px;display: flex;flex-direction: column;align-items: center">
                                        <span>{{ item.competition_name }} {{ timestampToTime(item.match_time) }}</span>
                                        <!-- <span>{{ item.home_team_name }} VS {{ item.away_team_name }}</span> -->
                                        <div v-if="ruleForm.category==1">
                                            <span>{{ item.home_team_name }} VS {{ item.away_team_name }}</span>
                                        </div>
                                        <div v-if="ruleForm.category==2">
                                            <span>{{ item.away_team_name }} VS {{ item.home_team_name }}</span>
                                        </div>
                                    </div>
                                </el-radio-button>
                            </el-radio-group>
                            <el-dialog title="选择结果" :visible.sync="open" width="500px" class="dialogLand" :before-close="closeFormOpen"
                                append-to-body>
                                <div style="display: flex;flex-direction: column;">
                                    <div style="margin-bottom: 14px">
                                        <!-- <span style="margin-left: 10px;">{{ oodMatchData.home_team_name }} VS {{ oodMatchData.away_team_name }}</span> -->
                                        <div v-if="ruleForm.category==1">
                                            <span>{{ oodMatchData.home_team_name }} VS {{ oodMatchData.away_team_name }}</span>
                                        </div>
                                        <div v-if="ruleForm.category==2">
                                            <span>{{ oodMatchData.away_team_name }} VS {{ oodMatchData.home_team_name }}</span>
                                        </div>
                                    </div>
                                    <div style="margin-left: 10px">
                                        <div style="display: flex;margin-bottom: 10px;">
                                            <el-checkbox-group v-model="checkboxGroup1" @change="changeOdds" :max="max">
                                                <div v-if="typeData == 1">
                                                    <div>
                                                        <el-checkbox-button v-for="(itemsss, index) in oddsDataList[0]" @change="changeOdds6(itemsss)"
                                                            :label="itemsss" :key="index">
                                                            <div>{{ itemsss.label }}</div>
                                                            <div>{{ itemsss.value }}</div>
                                                        </el-checkbox-button>
                                                    </div>
                                                    <div>
                                                        <el-checkbox-button v-for="(itemss, index1) in oddsDataList[1]" @change="changeOdds6(itemss)"
                                                            :label="itemss" :key="index1">
                                                            <div>{{ itemss.label }}</div>
                                                            <div>{{ itemss.value }}</div>
                                                        </el-checkbox-button>
                                                    </div>

                                                </div>
                                                <div v-else>
                                                    <el-checkbox-button v-for="(items, index) in oddsDataList[0]" @change="changeOdds7(items)"
                                                        :label="items" :key="index">
                                                        <div>
                                                            <span>{{ items.label }}</span>
                                                            <span>{{ items.value }}</span>
                                                        </div>
                                                    </el-checkbox-button>
                                                </div>
                                            </el-checkbox-group>
                                        </div>
                                    </div>
                                </div>
                                <div style="text-align: right;">
                                    <el-button @click="clickClose">取消</el-button>
                                    <el-button type="primary" @click="clickClose">确认</el-button>
                    </div>
                            </el-dialog>

                        </div>
                    </div>
                    <div style="text-align: right;">
                        <el-button @click="clickDelete">取消</el-button>
                        <el-button type="primary" @click="ConfirmOods">确认</el-button>
                    </div>
                </el-dialog>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="分类标签" prop="name">
                        <el-select v-model="ruleForm.category" placeholder="请选择" @change="handleSelectChange">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                                :value="item.valuess">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择老师" prop="name">
                        <el-select v-model="ruleForm.expert_id" placeholder="请选择" @change="selectChangeExpert">
                            <el-option v-for="(item, index) in expertDataList" :key="index" :label="item.nickname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="串子分类">
                        <el-radio-group v-model="ruleForm.pass_lx">
                            <el-radio :label="1">单场</el-radio>
                            <el-radio :label="2">2串1</el-radio>
                            <el-radio :label="3">3串1</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="显示类型">
                        <el-radio-group v-model="ruleForm.show_lx">
                            <el-radio :label="1">首页优选</el-radio>
                            <el-radio :label="2">近期连红</el-radio>
                            <el-radio :label="3">近期爆棚</el-radio>
                            <el-radio :label="4">今日热卖</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赛事添加">
                        <div v-if="fanxian.length != 0">
                            <div v-for="(items, index) in fanxian" :key="index">
                                <!-- <span>{{ items.home_team_name }}VS{{ items.away_team_name }}</span> -->
                                <div v-if="ruleForm.category==1">
                                            <span>{{ items.home_team_name }} VS {{ items.away_team_name }}</span>
                                        </div>
                                        <div v-if="ruleForm.category==2">
                                            <span>{{ items.away_team_name }} VS {{ items.home_team_name }}</span>
                                        </div>
                                <div v-for="(item, index) in items.odds" :key="index">
                                    <span>{{ item.label }}</span>
                                    <span>{{ item.value }}</span>
                                </div>
                            </div>
                        </div>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="clickType">添加</el-button>
                    </el-form-item>
                    <el-form-item label="文章标题">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="文章介绍">
                        <!-- <quill-editor v-model="ruleForm.free_content" class="editor" ref="editorRef1" :options="editorOption1">
                        </quill-editor> -->
                        <div v-if="isVisible1">
                            <WangEditor :content="contentData1" @submit="workVadeUpdate1" />
                        </div>
                    </el-form-item>
                    <el-form-item label="付费内容">
                        <!-- <quill-editor v-model="ruleForm.charge_content" class="editor" ref="editorRef2" :options="editorOption2">
                        </quill-editor> -->
                        <div v-if="isVisible1">
                            <WangEditor :content="contentData2" @submit="workVadeUpdate2" />
                        </div>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="是否付费">
                        <el-radio-group v-model="ruleForm.is_free">
                            <el-radio :label="1">付费</el-radio>
                            <el-radio :label="2">不付费</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否不中退">
                        <el-radio-group v-model="ruleForm.no_win_back">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="是否执行红黑">
                        <el-radio-group v-model="ruleForm.exec_hh">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item label="是否显示">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="2">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item style="margin-top: 10px;" label="会员卡排序" prop="name">
                        <el-input v-model="ruleForm.sort"></el-input>
                    </el-form-item>

                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm(1)">确认</el-button>
                </div>
            </el-dialog>
        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">

            </el-table-column>
            <el-table-column prop="category" label="赛事分类" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.category == 1">
                        足球
                    </span>
                    <span v-if="scope.row.category == 2">
                        篮球
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="pass_lx_text" label="过关类型" align="center">

            </el-table-column>
            <el-table-column prop="expert_info.nickname" label="专家" align="center">
            </el-table-column>
            <el-table-column prop="no_win_back" label="是否不中退" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.no_win_back == 1">
                        是
                    </span>
                    <span v-if="scope.row.no_win_back == 2">
                        否
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="is_free" label="是否付费" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_free == 1">
                        是
                    </span>
                    <span v-if="scope.row.is_free == 2">
                        否
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="show_lx_text" label="位置" align="center">

            </el-table-column>
            <el-table-column prop="title" label="标题" align="center">

            </el-table-column>
            <el-table-column prop="price" label="价格" align="center">

            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="handleButton1Click(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleButton2Click(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>

    <div>
        <el-dialog title="修改" :visible.sync="dialogTableModify" :before-close="modifyForm" >
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="选择老师" prop="name">
                        <el-select v-model="ruleForm.expert_id" placeholder="请选择" @change="selectChangeExpert">
                            <el-option v-for="(item, index) in expertDataList" :key="index" :label="item.nickname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="串子分类">
                        <el-radio-group v-model="ruleForm.pass_lx">
                            <el-radio :label="1">单场</el-radio>
                            <el-radio :label="2">2串1</el-radio>
                            <el-radio :label="3">3串1</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="显示类型">
                        <el-radio-group v-model="ruleForm.show_lx">
                            <el-radio :label="1">首页优选</el-radio>
                            <el-radio :label="2">近期连红</el-radio>
                            <el-radio :label="3">近期爆棚</el-radio>
                            <el-radio :label="4">今日热卖</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赛事修改">
                        <div v-if="ruleForm.matches.length != 0">

                            <div v-for="(items, index) in ruleForm.matches" :key="index" @click="toChange(items.match_id,items.match_time,items.lottery_id,items)">
                                <div v-if="ruleForm.category==1">
                                            <span>{{ items.home_team_name }} VS {{ items.away_team_name }}</span>
                                        </div>
                                        <div v-if="ruleForm.category==2">
                                            <span>{{ items.away_team_name }} VS {{ items.home_team_name }}</span>
                                        </div>
                                        <div v-if="items.odds.length>1">
                                            <el-checkbox-group v-model="checkboxGroup5" @change="changeOdds5" >
                                                <div>
                                                        <el-checkbox-button v-for="(j, index) in items.odds[0]"
                                                            :label="j" :key="index" @change="changeOdds0(j)">
                                                            <div>{{ j.label }}</div>
                                                            <div>{{ j.value }}</div>
                                                        </el-checkbox-button>
                                                    </div>
                                                    <div>
                                                        <el-checkbox-button v-for="(j, index) in items.odds[1]"
                                                            :label="j" :key="index" @change="changeOdds0(j)">
                                                            <div>{{ j.label }}</div>
                                                            <div>{{ j.value }}</div>
                                                        </el-checkbox-button>
                                                    </div>

                                            </el-checkbox-group>
                                        </div>
                                        <div v-if="items.odds.length==1">
                                            <el-checkbox-group v-model="checkboxGroup4" @change="changeOdds4" >
                                                <el-checkbox-button v-for="(j, index) in items.odds[0]"
                                                        :label="j" :key="index" @change="changeOdds1(j)">
                                                        <div>
                                                            <span>{{ j.label }}</span>
                                                            <span>{{ j.value }}</span>
                                                        </div>
                                                    </el-checkbox-button>
                                            </el-checkbox-group>
                                        </div>
                            </div>
                        </div>
                        <el-button type="primary" @click="clickModifications">确认修改</el-button>
                    </el-form-item>
                    <el-form-item label="文章标题">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="文章介绍">
                        <!-- <quill-editor v-model="ruleForm.free_content" class="editor" ref="editorRef3" :options="editorOption3">
                        </quill-editor> -->
                        <div v-if="isVisible">
                            <WangEditor :content="contentData3" @submit="workVadeUpdate3" />
                        </div>
                    </el-form-item>
                    <el-form-item label="付费内容">
                        <!-- <quill-editor v-model="ruleForm.charge_content" class="editor" ref="editorRef4" :options="editorOption4">
                        </quill-editor> -->
                        <div v-if="isVisible">
                            <WangEditor :content="contentData4" @submit="workVadeUpdate4" />
                        </div>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="是否付费">
                        <el-radio-group v-model="ruleForm.is_free">
                            <el-radio :label="1">付费</el-radio>
                            <el-radio :label="2">不付费</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否不中退">
                        <el-radio-group v-model="ruleForm.no_win_back">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="是否执行红黑">
                        <el-radio-group v-model="ruleForm.exec_hh">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item label="是否显示">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="2">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item style="margin-top: 10px;" label="会员卡排序" prop="name">
                        <el-input v-model="ruleForm.sort"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm(2)">确认</el-button>
                </div>
            </el-dialog>
    </div>
    </div>

</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import WangEditor from '@/components/richText'
import { get } from 'sortablejs';
import { matcheList, expertList, getConfigList, oddsData, additionData, recommendationDatalist,recommendationDelete } from '../../../libs/api'
import "../../assets/css/quillEditor.css";
import * as Quill from "quill";
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
// 自定义字号的大小，注意下面的内容要和css里面对应上
var sizes = [false, "16px", "18px", "20px", "22px", "24px","26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
// var Font = Quill.import("formats/font");
const Font = Quill.import('attributors/style/font')
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ 'header': 1 }, { 'header': 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: [ false, "16px", "18px", "20px", "22px","24px", "26px", "28px", "30px"]}], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: []}], //显示字体选择
  [{ align: [] }], // 对齐方式-----
  ["clean"], // 清除文本格式-----
  ['link', 'image', 'video'], // 链接、图片、视频-----
];
export default {
    // components: { Editor, Toolbar },
    components: {
    WangEditor
  },
    data() {
        return {
            isVisible:false,
            isVisible1:false,
            contentData1:'',
            contentData2:'',
            contentData3:'',
            contentData4:'',
            id: this.$route.query.id,
      content: '',
            fbAll:[{
                id:1,
                nickname:"足球"
            },{
                id:2,
                nickname:"篮球"
            }],
            yOrN:[{
                id:1,
                nickname:"是"
            },{
                id:2,
                nickname:"否"
            }],
            dialogTableVisible: false,
            dialogVisible: false,
            dialogTableModify:false,
            valuess: '',
            values: '',
            value: '',
            sortCard: '',
            content: '',
            dialogImageUrl: '',
            innerVisible: false,
            checkboxGroup1: [],
            checkboxGroup2: [],
            indexData: ["1.6", "1.7", "1.8"],
            indexData1: ["1.99", "1.9", "1.77"],
            inputData: '',
            tableData: [],
            rules: {
                // name: [
                //     { required: true, message: '请输入名称', trigger: 'blur' },
                // ],
            },
            editorOption1: {
      	// 主题
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
      editorOption2: {
      	// 主题
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
      editorOption3: {
      	// 主题
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
      editorOption4: {
      	// 主题
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
            ruleForm: {
                category: '',
                expert_id: '',
                show_lx: 1,
                pass_lx: 1,
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: 1,
                no_win_back: 2,
                 exec_hh: 2,
                status: 1,
                sort: '',
                matches: ''
            },
            listing: [
                {
                    value: '选项1',
                    label: '上架'
                }, {
                    value: '选项2',
                    label: '不上架'
                }
            ],
            options: [{
                valuess: 1,
                label: '足球赛事'
            }, {
                valuess: 2,
                label: '篮球赛事'
            }],
            dataList: [],
            expertDataList: [],
            yuce: [],
            radio1: {},
            typeData: '',
            oddsDataList: [],
            max: 2,
            fanxian: [],
            fanxians: [],
            oodMatchData: {},
            oodMatchDatas: {},
            allOodData: [],
            currentPage: 1,
            totalCount: 1,
            PageSize: 5,
            pageSizes: [5, 10],
            alltabData: [],
            open: false,
            checkboxGroup5:[],
            checkboxGroup4:[],
            saishi:[],
            y_match:{
                time:'',
                id:'',
                gid:''
            },
            dataArrS:[],
            gogos:[],
            inputName:'',
            fbData:'',
            ynData:'',
            titleData:'',
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF:{
                }
             },
            mode: 'default', // or 'simple'
            quill1:null,
            quill2:null,
            quill3:null,
            quill4:null
        }
    },
    created() {
        this.getExpertList()
        this.getConfigListData()
        this.getRecommendationDatalist()
    //     this.quill1 = new Quill(this.$refs.editorRef1, {
    // });
    // this.quill2 = new Quill(this.$refs.editorRef2, {
    // });
    // this.quill3 = new Quill(this.$refs.editorRef3, {
    // });
    //     this.quill4 = new Quill(this.$refs.editorRef4, {
    // });
    },
    methods: {
        // 自定义上传图片接口

        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        handleChange(value){
            this.getRecommendationDatalist()
            console.log(value)
        },
        handleChangeType(value){
            this.getRecommendationDatalist()
        },
        handleChangeYesOrNo(value){
            this.getRecommendationDatalist()
        },
        searchExpert(){
            this.getRecommendationDatalist()
        },
        toChange(id,time,lid,data){
            this.y_match.id = id
            this.y_match.time = time
            this.y_match.gid = lid
            this.gogos.push(data)
            console.log(this.gogos)
        },
        clickModifications(){
            // this.quill3.destroy();
            // this.quill4.destroy();
            // let data = {}
            // console.log(this.ruleForm)
            // console.log(this.ruleForm.matches)
            // let dataArr = {}
            // dataArr.match_id = this.y_match.id
            // dataArr.match_time = this.y_match.time
            // dataArr.lot_lx = this.y_match.gid
            // dataArr.odds = this.ruleForm.matches[0].odds
            //     this.dataArrS.push(dataArr)
            // if(this.ruleForm.matches.length==1){
            //      dataArr.odds = this.ruleForm.matches[0].odds
            //     this.dataArrS.push(dataArr)
            // }
            console.log(this.ruleForm.matches)
            if(this.ruleForm.matches.length==1){
                let uzi = {}
                let wuzi = []
                uzi.lot_lx = this.ruleForm.matches[0].lottery_id
                uzi.match_time = this.ruleForm.matches[0].match_time
                uzi.match_id = this.ruleForm.matches[0].match_id
                uzi.odds = this.ruleForm.matches[0].odds
                wuzi.push(uzi)
                this.dataArrS = wuzi
            }else{
                console.log(this.ruleForm.matches)
            console.log(this.ruleForm.id)
            const uniqueArray = this.gogos.filter((obj, index, self) =>
                index === self.findIndex((o) => (
                    o.id === obj.id
                ))
            );
            let newArray = uniqueArray.map(item => ({ match_id: item.match_id, match_time: item.match_time,lot_lx: item.lottery_id,odds:item.odds}));
            console.log(newArray)
            this.dataArrS = newArray
            this.gogos = []
            console.log(this.dataArrS)
            this.dialogTableVisible = false
            }

        },
        changeOdds5(e) {
            console.log(e)
            // e.map(item => {
            //     item.is_recommend = true
            // })
            // this.checkboxGroup5 = e
            // console.log(this.checkboxGroup5)
        },
        changeOdds6(e){
            e.is_recommend = !e.is_recommend
            console.log(e)
        },
        changeOdds7(e){
            e.is_recommend = !e.is_recommend
        },
        changeOdds0(e){
            e.is_recommend = !e.is_recommend
        },
        changeOdds1(e){
            e.is_recommend = !e.is_recommend
        },
        changeOdds4(e) {
            console.log(e)
            e.map(item => {
                item.is_recommend = true
            })
            this.checkboxGroup4 = e
        },
        modifyForm(){
            this.dialogTableModify=false
            this.checkboxGroup5 = []
            this.gogos = []
            this.isVisible = false;
            // this.quill3.destroy();
            // this.quill4.destroy();
            Object.assign(this.ruleForm, {
                category: '',
                expert_id: '',
                show_lx: '',
                pass_lx: '',
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: '',
                no_win_back: '',
                 exec_hh: '',
                status: '',
                sort: '',
                matches: ''
      });

        },
        closeForm(){
            // this.isVisible1 = false
            // console.log("关闭")
//             this.$nextTick(()=>{
//         this.$refs.ruleForm.resetFields();
//    })
console.log(888)
Object.assign(this.ruleForm, {
    category: '',
                expert_id: '',
                show_lx: '',
                pass_lx: '',
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: '',
                no_win_back: '',
                 exec_hh: '',
                status: '',
                sort: '',
                matches: ''
      });
      this.fanxian=[]
      this.fanxians=[]
  this.dialogTableVisible=false;//关闭对话框
  this.isVisible1 = false
},
closeFormData(){

      this.innerVisible=false
},
        // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getRecommendationDatalist()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getRecommendationDatalist()
    },
        getRecommendationDatalist() {
            recommendationDatalist({
                page: this.currentPage,
                limit: this.PageSize,
                expert_id:this.inputName,
                category:this.fbData,
                title:this.titleData,
                no_win_back:this.ynData
            }).then(res => {
                console.log(res)
                this.tableData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
        },
        ConfirmOods() {
            console.log(this.allOodData)
            this.innerVisible = false
            Object.assign(this.ruleForm, {
                yuce:''
      });
            if(this.checkboxGroup1.length==0){
                this.$alert('请选择相关赛事结果', '提示信息', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
        return
            }
            this.oodMatchData.match_id = this.allOodData.match_id
            this.oodMatchData.lot_lx = this.allOodData.lot_lx
            this.oodMatchData.match_time = this.allOodData.match_time
            this.oodMatchData.odds = this.oddsDataList

            this.oodMatchDatas.match_id = this.allOodData.match_id
            this.oodMatchDatas.lot_lx = this.allOodData.lot_lx
            this.oodMatchDatas.match_time = this.allOodData.match_time
            this.oodMatchDatas.odds = this.oddsDataList

            this.checkboxGroup1 = []
            this.fanxian.push(this.oodMatchData)
            this.fanxians.push(this.oodMatchDatas)
            this.oodMatchDatas = {}
            this.oodMatchData = {}
            this.oddsDataList = []
            this.dataList = []
            this.inputData = ''
            console.log(this.fanxian)

        },
        changeOdds(e) {
            console.log(e)
            e.map(item => {
                item.is_recommend = true
                // item.is_recommend = !item.is_recommend
            })
            this.checkboxGroup1 = e
            console.log(this.oddsDataList)
        },
        changeYuce(e) {
            console.log(e)
            this.radio1 = {}
            // console.log(this.ruleForm)

            this.typeData = e
            if (this.radio1 != {}) {
                oddsData({
                    match_id: this.radio1.match_id,
                    lx: this.ruleForm.category,
                    lot_lx: this.typeData
                }).then(res => {
                    console.log(res)
                    if (this.typeData == 1) {
                        this.oddsDataList = res.data.odds
                    } else {
                        this.oddsDataList = res.data.odds[0]
                    }
                    this.allOodData = res.data
                })
            }
        },

        changeMatch(e) {
            this.radio1 = e
            console.log(this.radio1)
            this.open = true
            this.oodMatchData.home_team_name = e.home_team_name
            this.oodMatchData.away_team_name = e.away_team_name
            oddsData({
                match_id: this.radio1.match_id,
                lx: this.ruleForm.category,
                lot_lx: this.typeData
            }).then(res => {
                console.log("队伍名称", res)
                if (this.typeData == 1) {
                    this.oddsDataList = res.data.odds
                } else {
                    this.oddsDataList = res.data.odds
                    console.log("78787",this.oddsDataList)
                }
                this.allOodData = res.data
            })
        },
        // 通用接口
        getConfigListData() {
            getConfigList({

            }).then(res => {
                console.log("通用", res)
                this.yuce = res.data.lotLxList
            })
        },
        // 获取专家
        getExpertList() {
            expertList({
                page: 1,
                limit: 1000
            }).then(res => {
                this.expertDataList = res.data.list
            })
        },
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes()
            // var s = date.getSeconds();
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            return M + D + h + m;
        },
        handleSelectChange(value) {
            console.log(this.ruleForm)
            // this.valuess = value
        },
        selectChangeExpert(value) {
            console.log(value)
            console.log(this.ruleForm)
        },
        getInput() {
            matcheList({
                page: 1,
                limit: 10,
                lx: this.ruleForm.category,
                name: this.inputData
            }).then(res => {
                console.log(res)
                this.dataList = res.data.list.data
            })
        },
        clickType(value) {
            console.log(value)
            this.innerVisible = true
        },
        handleButtonAdd() {
            this.dialogTableVisible = true
            this.ruleForm.show_lx = 1
            this.ruleForm.pass_lx = 1
            this.ruleForm.is_free = 1
            this.ruleForm.no_win_back = 2
            this.ruleForm.exec_hh = 2
            this.ruleForm.status = 1
            this.isVisible1 = true

        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        workVadeUpdate1(content){
            console.log(content)
            this.ruleForm.free_content = content
        },
        workVadeUpdate2(content){
            console.log(content)
            this.ruleForm.charge_content = content
        },
        workVadeUpdate3(content){
            console.log(content)
            this.ruleForm.free_content = content
        },
        workVadeUpdate4(content){
            console.log(content)
            this.ruleForm.charge_content = content
        },
        clickConfirm(e) {
            let that = this

        //     that.content = '<p><br/></p>'
        //     that.$confirm('是否确认添加该推荐?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //     that.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   });
        // //   that.workVadeUpdate()
        // console.log(that.ruleForm)
        // }).catch(() => {
        //     that.$message({
        //     type: 'info',
        //     message: '已取消删除'
        //   });
        // });
        if(this.ruleForm.price<=0){
          that.$message({
              type: 'error',
              message: '填写金额不能少于0!'
            });
          return false;
        }


        if(e==2){
            this.dialogTableModify = false
            this.isVisible = false;
            additionData({
                category: this.ruleForm.category,
                expert_id: this.ruleForm.expert_id,
                show_lx: this.ruleForm.show_lx,
                pass_lx: this.ruleForm.pass_lx,
                title: this.ruleForm.title,
                free_content: this.ruleForm.free_content,
                charge_content: this.ruleForm.charge_content,
                price: this.ruleForm.price,
                is_free: this.ruleForm.is_free,
                no_win_back: this.ruleForm.no_win_back,
                 exec_hh: this.ruleForm.exec_hh,
                status: this.ruleForm.status,
                sort: this.ruleForm.sort,
                matches: JSON.stringify(this.dataArrS),
                id:this.ruleForm.id
            }).then(res => {

              if(res.code!=1){
                that.$message({
                    type: 'error',
                    message: res.msg
                  });
                return false;
              }
            that.dialogTableVisible = false
                console.log(res)
                Object.assign(this.ruleForm, {
                category: '',
                expert_id: '',
                show_lx: '',
                pass_lx: '',
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: '',
                no_win_back: '',
                 exec_hh: '',
                status: '',
                sort: '',
                matches: ''
            });
                this.dataArrS = []
                this.getRecommendationDatalist()
            })
        }else{
            this.isVisible1 = false;
            additionData({
                category: this.ruleForm.category,
                expert_id: this.ruleForm.expert_id,
                show_lx: this.ruleForm.show_lx,
                pass_lx: this.ruleForm.pass_lx,
                title: this.ruleForm.title,
                free_content: this.ruleForm.free_content,
                charge_content: this.ruleForm.charge_content,
                price: this.ruleForm.price,
                is_free: this.ruleForm.is_free,
                no_win_back: this.ruleForm.no_win_back,
                 exec_hh: this.ruleForm.exec_hh,
                status: this.ruleForm.status,
                sort: this.ruleForm.sort,
                matches: JSON.stringify(this.fanxians),
            }).then(res => {
                console.log(res)

                if(res.code!=1){
                  that.$message({
                      type: 'error',
                      message: res.msg
                    });
                  return false;
                }
      that.dialogTableVisible = false
                Object.assign(this.ruleForm, {
                category: '',
                expert_id: '',
                show_lx: '',
                pass_lx: '',
                title: '',
                free_content: '',
                charge_content: '',
                price: '',
                is_free: '',
                no_win_back: '',
                status: '',
                sort: '',
                matches: ''
      });
      this.fanxians = []
      this.fanxian = []
      this.dataArrS = []
      console.log("这是反显",this.fanxians)
                this.getRecommendationDatalist()
            })
        }


            console.log(this.ruleForm)
        },
        clickClose(){
            this.open = false
        },
        closeFormOpen(){
            this.open = false
    //         Object.assign(this.ruleForm, {
    //             yuce:''
    //   });
            this.checkboxGroup1 = []
        },
        clickDelete() {
            // console.log('7777')
            this.isVisible = false;
            this.isVisible1 = false
            this.dialogTableModify = false
            this.dialogTableVisible = false
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleButton1Click(row) {
            console.log(row)
            this.isVisible = true;
            this.ruleForm.category = row.category
            this.ruleForm.expert_id = row.expert_id
            this.ruleForm.show_lx = row.show_lx
            this.ruleForm.pass_lx = row.pass_lx
            this.ruleForm.title = row.title
            this.ruleForm.free_content = row.free_content
            this.ruleForm.charge_content = row.charge_content
            this.ruleForm.price = row.price
            this.ruleForm.is_free = row.is_free
            this.ruleForm.no_win_back = row.no_win_back
             this.ruleForm.exec_hh = row.exec_hh
            this.ruleForm.status = row.status
            this.ruleForm.sort = row.sort
            this.ruleForm.matches = row.matchList
            this.ruleForm.id = row.id
            this.dialogTableModify = true
            this.contentData3 = row.free_content
            this.contentData4 = row.charge_content
            console.log("免费",this.contentData3)
            console.log("付费",this.contentData4)
            for(var i=0;i<this.ruleForm.matches.length;i++){
                if(this.ruleForm.matches[i].lottery_id==1){
                    if(this.ruleForm.category==1){
                        this.ruleForm.matches[i].odds[0].map(item=>{
                        if(item.is_recommend==true){
                            // item.is_recommend=false
                            this.checkboxGroup5.push(item)
                        }
                    })
                    this.ruleForm.matches[i].odds[1].map(item=>{
                        if(item.is_recommend==true){
                            // item.is_recommend=false
                            this.checkboxGroup5.push(item)
                        }
                    })
                    }else{
                        this.ruleForm.matches[i].odds[0].map(item=>{
                        if(item.is_recommend==true){
                            this.checkboxGroup4.push(item)
                            // item.is_recommend=false
                        }
                    })
                    }
                }else{
                    this.ruleForm.matches[i].odds[0].map(item=>{
                        if(item.is_recommend==true){
                            this.checkboxGroup4.push(item)
                            // item.is_recommend=false
                        }
                    })
                }
            }
            console.log(this.ruleForm.matches)
            let newArray = this.ruleForm.matches.map(item => ({ match_id: item.match_id, match_time: item.match_time,lot_lx: item.lottery_id,odds:item.odds}));
            this.dataArrS = newArray
            console.log(newArray)
        },
        handleButton2Click(row) {
            console.log(row)
            this.$confirm('此操作将永久删除该推荐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          recommendationDelete({
                id:row.id
            }).then(res=>{
                console.log(res)
                this.getRecommendationDatalist()
            })
        }).catch(() => {

        });
        }
    }

}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.addBtn {
    margin: 30px 0 30px 30px;
}

.inout {
    display: flex;
    align-items: center;
}
.ql-clipboard {
    position: fixed;
    display: none;
    left: 50%;
    top: 50%;
  }
</style>
